<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/alert.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <span class="nav_left">
            <img src="img/logo.jpg" alt="">
        </span>
        <span class="nav_right">
            <a href="topic_list.html">主页</a>
            <!-- <a href="blog_edit.html">写博客</a> -->
            <a href="reg.html">注册</a>
            <!-- <a href="#">注销</a> -->
        </span>  
    </div>
    <!-- 提示框 -->
    <div id="pr">

    </div>
    <!-- 版心 -->
    <div class="login-container">
       <!-- 中间的登陆框 -->
        <div class="login-dialog" style="height: 450px">
            <h2>登录</h2>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username" class="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password" class="password" maxlength="10">
            </div>
            <div class="row">
				<input type="text" id="authCode" class="form-control" name="verifyCode" placeholder="请输入验证码" required="true">
				<img class="imgCode" alt="点击图片刷新！" src="/common/kaptcha" onclick="this.src='/common/kaptcha?d='+new Date()*1">
			</div>
            <div class="msg">
                <a class="m" href="find_password.html">找回密码</a>
                <a class="ms" href="reg.html">注册</a>
            </div>
            <!-- <button id="seach" onclick="">找回密码</button> -->
            <div class="row">
                <button id="submit" onclick="mylogin()">提交</button>
            </div>
        </div>
    </div>
    <script>
        function mylogin() {
            var username = jQuery("#username");
            var password = jQuery("#password");
            var authCode = jQuery("#authCode");
            if(username.val() == "") {
                displayAlert('error','用户名不能为空',1000);
                setTimeout(function(){
                    username.focus();
                } ,500);
                return;
            }
            if(password.val() == "") {
                displayAlert('error','密码不能为空',1000);
                setTimeout(function(){
                    password.focus();
                } ,500);
                return;
            }
            if(username.length > 40) {
                displayAlert('error','用户名过长',1000);
                setTimeout(function(){
                    username.focus();
                } ,500);
                return;
            }
            if(password.length > 10) {
                displayAlert('error','密码过长',1000);
                setTimeout(function(){
                    password.focus();
                } ,500);
                return;
            }
            if(authCode.val() == "") {
                displayAlert('error','验证码不能为空',1000);
                setTimeout(function(){
                    authCode.focus();
                } ,500);
                return;
            }
            if(authCode.length > 4) {
                displayAlert('error','验证码有误',1000);
                setTimeout(function(){
                    authCode.focus();
                } ,500);
                return;
            }
            jQuery.ajax({
                url:"user/login",
                type:"POST",
                data:{"username":username.val(),"password":password.val(),"authCode":authCode.val()},
                success:function(result) {
                    if(result != null && result.code == 200) {
                        localStorage.setItem("Authorization",result.data.password);
                        // document.cookie("token",result.data.password);
                        displayAlert('success','登录成功，正在为您跳转至题目列表页面',2000);
                        setTimeout(function(){
                            location.href = "topic_list.html";
                        } ,1500);
                        
                    } else {
                        displayAlert('error',result.msg,1500);
                        setTimeout(function(){
                            username.focus();
                        } ,1000);
                    }
                }
            });
        }
    </script>
</body>

</html>